<template>
	<div style="position: relative;">
		
		<!--权限编辑界面-->
		<el-drawer :modal="false" style="position:absolute;"  v-if="editVisible"  size="100%" :visible.sync="editVisible" onload direction="btt"
			:modal-append-to-body="false">
			<!--弹窗标题-->
			<div slot="title" style="display: flex;">
				<div style="width: 60px;">
					<el-button icon="el-icon-back" type="text" @click="editVisible=false">返回</el-button>
				</div>
				<div style="padding: 5px; margin-right: 20px;">|</div>
				<div style="text-align: center;font-size: 15px; font-weight: bold;padding-top:2px;">
					编辑菜单
				</div>
			</div>
			
			<div style="margin: 0px 20px; height: 98%;">
				<!--弹窗主体内容-->
				<iframe  ref="editFrame" :src="'/admin/auth/menu_edit?menuid='+editMenuId" width="100%" height="100%" frameborder="0"></iframe>
			</div>
		</el-drawer>
		<div class="section-panel">
			<div>
				<el-button type="primary" icon="el-icon-plus">新增菜单</el-button>
			</div>
		</div>
		
		
		
		
		<!--查询参数-->
		<div class="section-panel">
			<div style="display: flex;">
				<div style="display: flex; ">
					<div style="width: 65px; line-height: 30px;">页面名称:</div>
					<div>
						<el-input placeholder="请输入菜单名称" v-model="filterForm.title" clearable></el-input>
					</div>
				</div>
				<div style="margin-left: 10px;">
					<el-button icon="el-icon-search" type="primary">查询</el-button>
				</div>
			</div>
		</div>

		<!--查询结果-->
		<div class="section-panel mt5 p10">
			<div style="height:calc(100vh - 200px); padding-bottom:40px; box-sizing: border-box">
			<el-table :default-expand-all="true" :data="menuList" row-key="mid" :tree-props="{children:'children', hasChildren:'hasChildren'}">
				<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
				<el-table-column prop="title" label="菜单名称"></el-table-column>
				<el-table-column prop="icon" label="图标" align="center">
					<template v-slot="scope">
						<i :class="scope.row.icon"></i>
					</template>
				</el-table-column>
				<el-table-column prop="key" label="菜单标识"></el-table-column>
				<el-table-column prop="path" label="路径"></el-table-column>
				<el-table-column prop="enable" label="状态">
					<template v-slot="scope">
						<el-switch active-value="1" :value="scope.row.enable"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="order" label="权重"></el-table-column>
				<el-table-column  label="操作" align="center" width="200px">
					<template v-slot="scope">
						<el-button-group>
							<el-button icon="el-icon-edit-outline" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
							<el-button type="danger" icon="el-icon-delete">删除</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			</div>
		</div>

	</div>
</template>

<script>
	import http from '@/utils/http';
	export default {
		data() {
			return {
				editMenuId:-1,
				editItem:{},
				filterForm: {
					title: ""
				},
				editVisible:false,
				menuList: []
			}
		},
		mounted() {
			this.loadDataList();
			window.addEventListener("message",this.handleiframeCallback)
		},
		methods:{
			handleEdit(index,data){
				this.editMenuId=data.mid;
				this.$nextTick(()=>{
					this.editVisible=true;
				})
			},
			loadDataList(){
				http.post("/api/admin/menus/list_by_page").then(res => {
					if (res.status == 200 && res.data.code) {
						this.menuList=res.data.list;
					}
				}).catch(error => {})
			},
			handleiframeCallback(event){
				if(event.data=="closedrawer"){
					this.editVisible=false;
					this.loadDataList();
				}
			}
		}
	}
</script>

<style>
</style>